<template>
  <div class="content">
    <div class="title">
      我的分润
    </div>
    <div class="shanghezi">
      <div class="shangzuo">
        <div class="row1">
          待提现金额：
        </div>
        <div class="row2">
          <div class="qianqian">
            {{waitCash&&waitCash/100||'0.00'}}
          </div>
          <div class="danwei">
            元
          </div>
        </div>
      </div>
      <el-button class="btn1"  type="primary"  @click="tixianla">申请提现
      </el-button>
    </div>
    <div class="kexuanbox">
      <div class="kexuanitem" v-for="(item,index) in datalist" :key="index">
        <div class="row1">
          <div class="name">
            {{item.key}}
          </div> 
          <div class="youxuan">
            <el-checkbox size="medium" v-model="item.checked"></el-checkbox>
          </div>
        </div>
        <div class="row2" v-for="(item1,index1) in item.value" :key="index1">
          <div class="row2_1">
            订单编号：{{item1.orderNo}}
          </div>
          <div class="row2_2">¥{{item1.orderMoneyTotal/100}}</div>
          <div class="row2_3">
            +{{item1.splitMoneyTotal/100}}
          </div>
        </div>
        <div class="row3">
          <div class="row3_1">
            <div class="label">
              订单总金额：
            </div>
            <div class="qianqian">
              ¥{{item.orderMoneyTotal/100}}
            </div>
          </div>
          <div class="row3_1">
            <div class="label">
              分润金额：
            </div>
            <div class="qianqian">
              ¥{{item.splitMoneyTotal/100}}
            </div>
          </div>
        </div>
      </div>
    </div>
   
    
  </div>
</template>

<script>
import { mytixian,tixianta}from '@/api/user'

export default {
  name: "mytixian",//个人中心 
  data() {
    return {
      waitCash:'',
			datalist:[],
    };
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
   
  },
  methods: {
    async tixianla(){
      console.log(this.datalist)
				var arr=this.datalist.filter(item=>{
					return item.checked
				})
				if(arr.length<=0){
					return this.$message.error('请选择要提现的订单')
				}
				var arr1=[]
				arr.map(item=>{
					arr1.push({
						listMap:item.deptVo,
						splitWxMoney:item.splitMoneyTotal,
					})
				})
				 var customer=JSON.parse(localStorage.getItem('customer'));
        console.log(customer)
				const res =await tixianta({
					appId: customer.appId,
          openid: customer.openid,
          list:arr1,
				})
        console.log(res)
				if(res.code !=200){
					return this.$message.error(res.msg)
				}
				this.$message.success('提现申请成功!')
				setTimeout(()=>{
					this.init()
				},1000)
    },
    async init(){
      	 var customer=JSON.parse(localStorage.getItem('customer'));
        console.log(customer)
      const res =await mytixian({
        	appId: customer.appId,
          openid: customer.openid,
      })
      console.log(res)
      this.waitCash=res.data.waitCash
				if(res.data.waitCash>0){
					var obj=res.data.orderList
					let keyValuePairs = Object.entries(obj).map(([key, value]) => ({ key, value }));
					keyValuePairs.map(item=>{
						item.checked=false
						item.splitMoneyTotal=0
						item.orderMoneyTotal=0
						if(obj[item.key]){
							let regex1 = new RegExp(`deptId=(.*?), `);
							var label1= item.key.match(regex1)[1]
							// console.log(label1)
							item.deptVo=Object.assign({}, { [label1]: obj[item.key] })
						}
						
						
						let regex = new RegExp(`deptName='(.*?)'`);
						item.key = item.key.match(regex)[1]
						item.splitMoneyTotal= item.value.reduce(function(acc, curr) {
						  return acc + curr.splitMoneyTotal;
						}, 0);
						item.orderMoneyTotal= item.value.reduce(function(acc, curr) {
						  return acc + curr.orderMoneyTotal;
						}, 0);
						
					})
					console.log(keyValuePairs)
					this.datalist=keyValuePairs
				}else{
          this.datalist=[]
					// this.datalist=[{key:'梯语优选',checked:false,splitMoneyTotal:12,orderMoneyTotal:'1200',value:[{
          //   orderNo:'2312313342534534',splitMoneyTotal:12,orderMoneyTotal:'1200',
          // }]},{key:'梯语优选1',checked:false,splitMoneyTotal:12,orderMoneyTotal:'1200',value:[{
          //   orderNo:'2312313342534534',splitMoneyTotal:12,orderMoneyTotal:'1200',
          // }]}]
				}
    },
    changeit(num){
      this.acindex = num
    },
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding: 16px;
  box-sizing: border-box;
  .title{
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    text-align: left;
    margin-bottom: 16px;
  }
  .shanghezi{
    display: flex;
    align-items: flex-start;
    width: 730px;
    height: 86px;
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.07);
    border-radius: 16px 16px 16px 16px;
    background-image: url('../../assets/images/fenrun4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shangzuo{
      display: flex;
      align-items: center;
      .row1{
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        text-align: left;
        margin-right: 4px;
      }
      .row2{
        display: flex;
        align-items: center;
        .qianqian{
          font-weight: bold;
          font-size: 36px;
          color: #DB4444;
          text-align: left;
          margin-right: 4px;
        }
        .danwei{
          margin-top: 10px;
          font-weight: 400;
          font-size: 14px;
        }

      }
    }
    .btn1{
      width: 108px;
      height: 32px;
      border-radius: 6px 6px 6px 6px;
      padding: 0;
    }
  }
  .kexuanbox{
    max-height: 424px;
    overflow-y: auto;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
    .kexuanitem{
      width: 458px;
      height: 204px;
      overflow-y: auto;
      background: #FFFFFF;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #E0E0E0;
      padding: 16px;
      box-sizing: border-box;
      .row1{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        .name{
          font-weight: 400;
          font-size: 20px;
          color: #000000;
        }
      }
      .row2{
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        font-weight: 400;
          font-size: 14px;
          color: #4F4F4F;
        .row2_1{
          width: 240px;
        }
        .row2_2,.row2_3{
          width: 120px;
          margin-left: 16px;
        }

      }
      .row3{
        display: flex;
        align-items: center;
        .row3_1{
          width: 50%;
          font-weight: 400;
          font-size: 14px;
          display: flex;
          align-items: center;
          .label{
            color: #4F4F4F;
          }
          .qianqian{
            color: #EB5757;
          }
        }
      }
    }
  }
}
::v-deep .el-checkbox__inner{
  width: 20px;
  height: 20px;
}
::v-deep .el-checkbox__inner::after{
  left: 6px;
  height: 10px;
  width: 5px;
}
</style>
